<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-row :gutter="15">          
          <el-col :md="6" :sm="12">
            <el-form-item label="起始日期:">
              <el-date-picker v-model="where.begindate" type="date" format='yyyy-MM-dd' value-format='yyyy-MM-dd' placeholder="选择日期" clearable class="ele-fluid"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="12">
            <el-form-item label="结束日期:">
              <el-date-picker v-model="where.enddate" type="date" format='yyyy-MM-dd' value-format='yyyy-MM-dd' placeholder="选择日期" clearable class="ele-fluid"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="补差依据:">
              <el-select
                clearable
                v-model="where.bcyjqs"
                placeholder="请选择补差依据"
                class="ele-fluid">
                <el-option v-for="item in bcyjList"
                         :key="item.id"
                         :label="item.bcname"
                         :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="申请单号:">
              <el-input
                clearable
                v-model="where.sqdh"
                placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="客户编码:">
              <el-input
                clearable
                v-model="where.custname"
                placeholder="请输入客户编码或名称"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="产品编码:">
              <el-input
                clearable
                v-model="where.invcode"
                placeholder="请输入产品编码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="状态:">
              <el-select
                clearable
                v-model="where.checkFlag"
                placeholder="请选择"
                class="ele-fluid">
                <el-option label="未提交" value="N"/>
                <el-option label="已提交" value="Y"/>
                <el-option label="流程中" value="inflow"/>
                <el-option label="已完成" value="done"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="采购员:">
              <el-input
                clearable
                v-model="where.cgy"
                placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="申请人:">
              <el-input
                clearable
                v-model="where.sqr"
                placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                size="mini"
                @click="reload">查询
              </el-button>
              <el-button @click="reset" size="mini">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :page-size="20"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        @row-dblclick="openDetail"
        height="calc(100vh - 280px)"
        style="margin-top:5px;">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit(null)"
            v-if="permission.includes('sys:bctb:add')">添加
          </el-button>
          <el-button
            size="small"
            type="warning"
            icon="el-icon-upload"
            class="ele-btn-icon"
            @click="updateFlag"
            v-if="permission.includes('sys:bctb:delete')">提交
          </el-button>
        </template>
        <template slot="checkFlag" slot-scope="{row}">
          <el-tag
            :type="checkFlagStyle[row.checkFlag]"
            size="mini"
            style="margin-left:5px;">
            {{ checkFlagValue[row.checkFlag] }}
          </el-tag>      
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit(row)"
            v-if="permission.includes('sys:bctb:edit') && row.checkFlag=='N'">修改
          </el-link>
          <span v-if="permission.includes('sys:bctb:delete') && row.checkFlag=='N'" style="margin-right:5px;margin-left:5px;"> 
            <el-popconfirm
              class="ele-action"
              title="确定要删除吗？"
              @confirm="remove(row)">
              <el-link
                type="danger"
                slot="reference"
                :underline="false"
                icon="el-icon-delete"
                >删除
              </el-link>
            </el-popconfirm>
          </span> 
          <span v-if="permission.includes('sys:bctb:delete') && row.checkFlag=='Y'" style="margin-right:5px;">
            <el-popconfirm
              class="ele-action"
              title="确定要撤回吗？"
              @confirm="withdraw(row)">
              <el-link
                type="primary"
                slot="reference"
                :underline="false"
                icon="el-icon-edit"
                >撤回
              </el-link>
            </el-popconfirm>
          </span>
          <el-link
            type="success"
            :underline="false"
            icon="el-icon-document"
            @click="openLog(row)"
            v-if="permission.includes('sys:bctb:edit')">日志
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <SpbcEdit :visible.sync="showEdit" :data="current"></SpbcEdit>
    <SpbcDetail :visible.sync="showDetail" :data="current"></SpbcDetail>
    <SubmitLogList :dataItem="current" :visible.sync="showLog"></SubmitLogList>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SpbcEdit from './spbc-edit'
import SpbcDetail from './spbc-detail'
import SubmitLogList from './submitloglist'

export default {
  name: 'ExamSpbc',
  components:{SpbcEdit,SpbcDetail,SubmitLogList},
  computed: {
    ...mapGetters(["permission"]),
  },
  mounted() {
    this.getBcyjList();
  },
  data() {
    return {
      bcyjList:[], //补差依据列表
      bcyjIdList:[], 
      checkFlagStyle:{"N":"warning","Y":"success","inflow":"primary","done":"info"},
      checkFlagValue:{"N":"未提交","Y":"已提交","inflow":"流程中","done":"已完成"},
      // 表格数据接口
      url: '/spbc/index',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'sqrq',
          label: '申请日期',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'sqdh',
          label: '申请单号',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'sqr',
          label: '申请人',
          showOverflowTooltip: true,
          minWidth: 60,
          align: 'center'
        },
        {
          prop: 'checkFlag',
          label: '状态',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center',
          slot:'checkFlag'
        },
        {
          prop: 'custname',
          label: '客户名称',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'left'
        },
        {
          prop: 'custcode',
          label: '客户编号',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'khlx',
          label: '客户类型',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'bcyjqs',
          label: '补差依据',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'left',
          formatter: (row) => {
            let yjArray = []
            for(let i=0; i<row.bcyjList.length; i++){
              yjArray.push(this.bcyjIdList[Number(row.bcyjList[i])]);             
            }
            return yjArray.join("|")          
          },
        },
        {
          prop: 'bclx',
          label: '补差类型',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'submitTime',
          label: '提交时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          prop: 'updateTime',
          label: '更新时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      showSelectCustomer:false,
      showDetail:false,
      showLog:false
    };
  },
  methods: {
    statusFormat(row, column,cellValue) {
      const daterc = row[column.property]
      if(daterc !=null){
        return cellValue=="Y"?"已提交":"未提交";
      }
      else
      {
        return "未提交";
      }
    },
    updateFlag(){
      if(this.selection.length<1)
      {
        this.$message.info("请选择一条补差申请后提交");
        return;
      }
      const loading = this.$loading({lock: true});
      var n=0;
      for(let s of this.selection){
        if(s.checkFlag == 'N'){
          for(let yj of this.bcyjList){
            if(s.bcyjqs == yj.id){
              let now = new Date();
              let diff = (new Date(yj.manageEnddate+' 23:59:59')) - (new Date(now.toDateString()));
              if(diff<0){
                this.$message.error("该申请已超期，无法提交");
                loading.close();
                return;
              }
              break;
            }
          }   
          const id = s.id;
          const flag = "Y";
          this.$http.post('/spbc/updateflag/'+id+'/'+flag).then(res => {
            n++;                     
            if (res.data.code === 0) {
              this.$message.success(res.data.msg); 
            } else {
              this.$message.error(res.data.msg);
            }
            if(n==this.selection.length){
              this.reload();
              loading.close();
            }
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        }else{
          this.$message.info('单据已提交，请勿重复提交');
          loading.close();
          return
        }
      }
    },
    /* 撤回 */
    withdraw(row){
      const id = row.id;
      const flag = "N";
      this.$http.post('/spbc/updateflag/'+id+'/'+flag).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    openDetail(row){
      this.current = row;
      this.showDetail = true;
    },
    openLog(row){
      this.current = row;
      this.showLog = true;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({lock: true});
      this.$http.delete('/spbc/delete/'+row.id).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({lock: true});
        this.$http.delete('/spbc/delete', {id: this.selection.map(d => d.id)}).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    async getBcyjList(){
      var res = await this.$http.get('/spbcinvset/getAllList?page=1&limit=1000');
      //console.log(res);
      if(res.status==200)
      {
        this.bcyjList = res.data.data.records;
        this.bcyjIdList = {};
        for(var i=0; i< res.data.data.records.length; i++){
          this.bcyjIdList[res.data.data.records[i].id] = res.data.data.records[i].bcname;
        }
      }

    },
  }
}
</script>

<style scoped>
.ele-btn-icon.el-button--mini, .ele-btn-icon.is-round.el-button--mini {
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 5px;
}
</style>
